<template>
	<view class="page-body ">
		<view class="top_box">
			<view class="head_box flex">
				<view class="headimgurl ">
					<image :src="headimgurl">
						<u-loading slot="loading"></u-loading>
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</image>
				</view>
				<view class="flex_bd mt20 ml20">
					<text class="userName ">Hi~,{{proxyInfo.byUser.real_name}}</text>
					<view class="bindPhone mt20">绑定号码：{{proxyInfo.byUser.mobile}}</view>
				</view>
			</view>
			<view class="icon_email" @click="app.goPage('/pages/public/message/index')">消息</view>
			<view class="icon_set" @click="app.goPage('/pages/member/center/set?from=channel')">设置</view>
			<!-- background: url(/pagesB/static/channel/images/proxy_bg.png) no-repeat; -->
			<view class="proxy-box" :class="proxyInfo.proxyLevel.style">
				<!--v-bind:class="{lingshou:linshou_s,pifa:pifa_s,quyu:quyu_s,shidai:shidai_s,shengdai:shengdai_s,guodai:guodai_s}">-->				
				<view class="u-grid mt40">
					<u-row gutter="12" justify="end">
						<u-col span="6" class="u-p-l-40">
							<view class="proxy-name">{{proxyInfo.proxyLevel.proxy_name}}</view>
							<view class="proxy-desc mt10">GRADE</view>
						</u-col>
						<u-col span="6" class="upgrade-box">
							<u-button hover-class="none" :hair-line="false" class="upgrade"
								@click="app.goPage('/pagesB/channel/upgrade/index')">去升级</u-button>
						</u-col>
					</u-row>
				</view>
				<view class="u-grid mt30 stats">
					<u-grid :col="3" :border="false">
						<u-grid-item bg-color="none" @click="app.goPage('/pagesB/channel/team/index')">
							<view class="stats-num">{{teamNum.allNum}}</view>
							<view class="stats-text">团队</view>
						</u-grid-item>
						<u-grid-item bg-color="none" @click="app.goPage('/pagesB/channel/center/achievement')">
							<view class="stats-num">{{achievementCount}}</view>
							<view class="stats-text">业绩</view>
						</u-grid-item>
						<u-grid-item bg-color="none" @click="app.goPage('/pagesB/channel/myStock/index')">
							<view class="stats-num">{{stockCount.total_in}}</view>
							<!-- <view class="stats-num">{{stockCount.total_in - stockCount.total_out}}</view> -->
							<view class="stats-text">库存</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

		</view>
		<view class="pbox u-p-0" style="margin-top: 150rpx;">
			<view class="menu-box p20">
				<view class="title">库存管理</view>
				<u-grid :col="4" class="u-grid mt20" :border="false">
					<u-grid-item @click="app.goPage('/pagesB/channel/myStock/index')">
						<u-icon size="55" name="/pagesB/static/channel/images/menus/15.png"></u-icon>
						<view class="grid-text">我的库存</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pagesB/channel/order/list?purchase_type=1')">
						<u-icon size="55" name="/pagesB/static/channel/images/menus/14.png"></u-icon>
						<view class="grid-text">我的进货</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pagesB/channel/order/list?purchase_type=3')">
						<u-icon size="55" name="/pagesB/static/channel/images/menus/13.png"></u-icon>
						<view class="grid-text">我的提货</view>
					</u-grid-item>
					<!-- <u-grid-item @click="app.goPage('/pagesB/channel/wallet/earnestMoney')"> -->
					<!-- <u-grid-item @click="app.goPage('/pagesB/channel/bond/bonList')"> -->
					<u-grid-item @click="app.goPage('/pagesB/channel/bond/bonListRetuen')">
						<u-icon size="55" name="/pagesB/static/channel/images/menus/12.png"></u-icon>
						<view class="grid-text">我的保证金</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pagesB/channel/order/bzjList')">
						<u-icon size="55" name="/pagesB/static/channel/images/menus/11.png"></u-icon>
						<view class="grid-text">下级升级</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pagesB/channel/order/xjList?purchase_type=1')">
						<u-icon size="55" name="/pagesB/static/channel/images/menus/10.png"></u-icon>
						<view class="grid-text">下级进货</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pagesB/channel/order/xjList?purchase_type=3')">
						<u-icon size="55" name="/pagesB/static/channel/images/menus/9.png"></u-icon>
						<view class="grid-text">下级提货</view>
					</u-grid-item>
					<!-- <u-grid-item @click="app.goPage('/pagesB/channel/myStock/index')"> -->
					<!-- <u-grid-item @click="app.goPage('/pagesB/channel/bond/bonList?type=2')"> -->
					<u-grid-item @click="app.goPage('/pagesB/channel/bond/bonListLowerRetuen')">
						<u-icon size="55" name="/pagesB/static/channel/images/menus/8.png"></u-icon>
						<view class="grid-text">下级保证金</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="pbox u-p-0 mt20">
			<view class="menu-box p20">
				<view class="title">人员管理</view>
				<u-grid :col="2" class="u-grid mt20 person" :border="true">
					<u-grid-item @click="app.goPage('/pagesB/channel/team/index')">
						<view class="u-flex">
							<u-icon size="55" name="/pagesB/static/channel/images/menus/7.png"></u-icon>
							<view class="u-flex-1 u-m-l-20">
								<view class="grid-text">所有代理</view>
								<view class="grid-tip">目前共有 <text class="u-m-l-10 u-m-r-10" style="color: #C39F4F;">
										{{teamNum.allNum}} </text> 人</view>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pagesB/channel/team/index?topTabCurrentIndex=1')">
						<view class="u-flex">
							<u-icon size="55" name="/pagesB/static/channel/images/menus/6.png"></u-icon>
							<view class="u-flex-1 u-m-l-20">
								<view class="grid-text">拿货下级</view>
								<view class="grid-tip">目前共有 <text class="u-m-l-10 u-m-r-10"
										style="color: #C39F4F;">{{teamNum.supplyNum}}</text> 人</view>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pagesB/channel/team/superiorInfo')">
						<view class="u-flex">
							<u-icon size="55" name="/pagesB/static/channel/images/menus/5.png"></u-icon>
							<view class="u-flex-1 u-m-l-20">
								<view class="grid-text">我的上级</view>
								<view class="grid-tip">推荐和拿货上级</view>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pagesB/channel/upgrade/index')">
						<view class="u-flex">
							<u-icon size="55" name="/pagesB/static/channel/images/menus/4.png"></u-icon>
							<view class="u-flex-1 u-m-l-20">
								<view class="grid-text" style="color: #C39F4F;">申请升级</view>
								<view class="grid-tip">成为更高级别代理</view>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="pbox u-p-0 mt20">
			<view class="menu-box p20">
				<view class="title">收入统计</view>
				<u-row gutter="16" class="stats-box mt40">
					<u-col span="3">
						<view class="mon">06月</view>
					</u-col>
					<u-col span="3">
						<view class="time">今日收入</view>
						<view class="num">¥{{walletCount.income.day}}</view>
					</u-col>
					<u-col span="3">
						<view class="time">本月收入</view>
						<view class="num">¥{{walletCount.income.month}}</view>
					</u-col>
					<u-col span="3">
						<view class="time">累计收入</view>
						<view class="num">¥{{walletCount.account.total_income}}</view>
					</u-col>
				</u-row>
				<u-row gutter="12" class="mt60">
					<u-col span="4" class="center">
						<u-button @click="app.goPage('/pagesB/channel/center/achievement')" size="medium"
							shape="circle">我的业绩</u-button>
					</u-col>
					<u-col span="4" class="center">
						<u-button @click="app.goPage('/pagesB/channel/bond/bonList')" size="medium" shape="circle">保证金
						</u-button>
					</u-col>
					<u-col span="4" class="center">
						<u-button @click="app.goPage('/pagesB/channel/wallet/rewardLog')" size="medium" shape="circle">
							奖励中心</u-button>
					</u-col>
				</u-row>
			</view>
		</view>

		<view class="pbox u-p-0 mt20">
			<view class="menu-box p20">
				<view class="title">我的工具</view>
				<u-grid :col="4" class="u-grid mt20" :border="false">
					<u-grid-item @click="app.goPage('/pagesA/school/index')">
						<u-icon size="100" name="/pagesB/static/channel/images/menus/3.png"></u-icon>
						<view class="grid-text">素材中心</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pagesB/channel/sys/report/report')">
						<u-icon size="100" name="/pagesB/static/channel/images/menus/2.png"></u-icon>
						<view class="grid-text">维权举报</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pages/shop/index/index')">
						<u-icon size="100" name="/pagesB/static/channel/images/menus/1.png"></u-icon>
						<view class="grid-text">直购商城</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				linshou_s: false,
				pifa_s: false,
				quyu_s: false,
				shidai_s: false,
				shengdai_s: false,
				guodai_s: false,
				background_img: '',
				headimgurl: '',
				proxyInfo: {
					byUser: {},
					proxyLevel: {},
					account: {}
				},
				tabCurrentIndex: 0,
				orderNum: [],
				orderSubNum: [],
				teamNum: {
					allNum: 0,
					underNum: 0,
					supplyNum: 0
				},
				nowMonth: '00',
				walletCount: {
					account: {},
					income: {}
				},
				stockCount: {
					total_in: 0,
					total_out: 0
				},
				achievementCount: 0
			}
		},
		onLoad() {
			let nowDate = new Date();
			let nowMonth = nowDate.getMonth();
			nowMonth = nowMonth + 1;
			if (nowMonth.toString().length == 1) {
				nowMonth = "0" + nowMonth;
			}
			this.nowMonth = nowMonth;
			this.$u.post('member/api.Users/checkLevel').then(res => {
				if (res.code == 1) {
					uni.showModal({
						title: '提示',
						content: res.msg,
						showCancel: false,
						success: function(returns) {
							if (returns.confirm) {
								uni.navigateTo({
									url: '/pagesB/channel/upgrade/index'
								});
							}
						}
					});
					return false;
				}
			});

			this.getStockCount();
			this.getAchievementCount();
		},
		onShow() {
			this.getProxyInfo();
			//获取团队统计
			this.$u.post('channel/api.team/getTeamCountToCenter').then(res => {
				this.teamNum = res.data;
			});
			//获取订单数
			this.$u.post('channel/api.order/getNum').then(res => {
				this.orderNum = res.data;
			});
			//获取下级订单数
			this.$u.post('channel/api.order/getSubNum').then(res => {
				this.orderSubNum = res.data;
			});
			//收入统计
			this.$u.post('channel/api.wallet/getWalletInfo').then(res => {
				this.walletCount.account = res.data.account;
				this.walletCount.income = res.data.income;
			});
		},
		computed: {},
		onReady() {},
		methods: {
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			getProxyInfo() {
				//获取登录会员信息
				this.$u.api.getProxyInfo().then(res => {
					if (res.data.proxyInfo.proxy_id < 1) { // 调回个人中心
						uni.redirectTo({
							url: '/pages/member/center/index'
						});
					}
					console.log(res.data.proxyInfo.proxy_id)
					switch (res.data.proxyInfo.proxy_id) {
						//国代
						case 100:
							this.guodai_s = true;
							break;
						case 101:
							this.shengdai_s = true;
							break;
						case 102:
							this.shidai_s = true;
							break;
						case 103:
							this.quyu_s = true;
							break;
						case 104:
							this.pifa_s = true;
							break;
						case 105:
							this.linshou_s = true;
							break;
					}
					this.proxyInfo = res.data.proxyInfo;
					if (this.proxyInfo.join_condition == 0) { //未满足加入条件
						uni.redirectTo({
							url: '/pagesB/channel/center/joinCondition'
						});
					}
					if (this.proxyInfo.byUser.headimgurl == '') {
						this.headimgurl = '/static/public/images/headimgurl.jpg';
					} else {
						this.headimgurl = this.config.baseUrl + this.proxyInfo.byUser.headimgurl;
					}
				});
			},
			//进入商城
			goShop() {
				this.app.goPage('/pagesB/shop/index/index');
				//window.open(this.config.baseUrl);
			},
			getStockCount() {
				//获取库存数量
				this.$u.post('channel/api.stock/getCount').then(res => {
					this.stockCount = res.data.total
				});
			},
			//业绩统计
			getAchievementCount() {
				this.$u.post('channel/api.stat/getMyOrderStat').then(res => {
					this.achievementCount = res.data.total
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-size-medium {
		padding: 0 31px !important;
	}

	.lingshou {
		background: url(/pagesB/static/channel/images/lingshou_bg.png) no-repeat;

		.upgrade {
			background: #4E4E4E;
			color: #E9D0A5;
		}

		.proxy-name,
		.proxy-desc {
			color: #4E4E4E !important;
		}

		.stats {
			color: #4E4E4E !important;
		}
	}

	.pifa {
		background: url(/pagesB/static/channel/images/pifa_bg.png) no-repeat;

		.upgrade {
			background: #7A6141;
			color: #E9D0A5;
		}
		.proxy-name,
		.proxy-desc {
			color: #7A6141 !important;
		}
		
		.stats {
			color: #7A6141 !important;
		}
	}

	.quyu {
		background: url(/pagesB/static/channel/images/quyu_bg.png) no-repeat;

		.proxy-name,
		.proxy-desc {
			color: #546472 !important;
		}

		.upgrade {
			background: #546472;
			color: #E9D0A5;
		}

		.stats {
			color: #546472 !important;
		}

	}

	.shidai {
		background: url(/pagesB/static/channel/images/shidai_bg.png) no-repeat;

		.upgrade {
			background: #966213;
			color: #E9D0A5;
		}
		.proxy-name,
		.proxy-desc {
			color: #966213 !important;
		}
		
		.stats {
			color: #966213 !important;
		}
	}

	.shengdai {
		background: url(/pagesB/static/channel/images/shengdai_bg.png) no-repeat;

		.upgrade {
			background: #9C6323;
			color: #E9D0A5;
		}
		.proxy-name,
		.proxy-desc {
			color: #9C6323 !important;
		}
		
		.stats {
			color: #9C6323 !important;
		}
	}

	.guodai {
		background: url(/pagesB/static/channel/images/guodai_bg.png) no-repeat;

		.upgrade {
			background: #744800;
			color: #E9D0A5;
		}
	}

	.top_box {
		width: 750rpx;
		height: 436rpx;
		position: relative;
		padding-top: 40rpx;
		color: #FFFFFF;
		padding-bottom: 40rpx;
		background: linear-gradient(129deg, #24262B 0%, #1A191C 100%);
		border-radius: 0 0 60rpx 60rpx;

		.head_box {
			position: relative;
			margin-left: 20rpx;

			.headimgurl {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				overflow: hidden;
				border: 3rpx solid #FFFFFF;
				background-color: #FFFFFF;

				image {
					border-radius: 50%;
					width: 100%;
					height: 100%;
				}
			}

			.headimgEdit {
				position: absolute;
				top: 110rpx;
				left: 70rpx;
			}

			.userName {
				font-size: 36rpx;
				padding-right: 40rpx;
				background: url(/pagesB/static/channel/images/title_icon/icon_01.png) no-repeat right center;
				background-size: 30rpx;
			}

			.bindPhone {
				font-size: 22rpx;
				background-size: 30rpx;
			}

			.checkIdCardTip {
				color: #FFFFFF;
				font-size: 22rpx;
			}

			.checkIdCardTip .u-btn {
				height: 40rpx;
				line-height: 40rpx;
				margin-left: 10rpx;
			}
		}

		.icon_email {
			position: absolute;
			top: 60rpx;
			right: 100rpx;
			width: 50rpx;
			padding-top: 45rpx;
			font-size: 24rpx;
			background-size: 80%;
			background-repeat: no-repeat;
			background-position: top center;
			background-image: url(/static/public/images/icon_email.png);
		}

		.icon_set {
			position: absolute;
			top: 60rpx;
			right: 20rpx;
			width: 50rpx;
			padding-top: 45rpx;
			font-size: 24rpx;
			background-size: 80%;
			background-repeat: no-repeat;
			background-position: top center;
			background-image: url(/static/public/images/icon_set.png);
		}
	}

	.pbox {
		position: relative;
	}

	.statis-box .month-box {
		float: left;
		width: 20%;
		text-align: center;
		line-height: 100rpx;
		background-color: #FFFFFF;
		border-right: 1rpx solid #EEEEEE;
	}

	.navbar {
		height: 90rpx;
		padding: 15rpx;

		.current {
			background-color: $base-color;
			color: #FFFFFF;
			border-radius: 10rpx;
			font-weight: normal;

			&:after {
				display: none !important;
			}
		}
	}

	.statis-box .info-box {
		float: left;
		width: 80%;
		padding-bottom: 20rpx;
	}

	.menu-box {
		background-color: #FFFFFF;
	}

	.menu-box .title {
		padding: 0rpx 20rpx;
		padding-top: 30rpx;
		font-weight: 700;
		font-size: 32rpx;
	}

	.menu-box .title .title-right {
		float: right;
		font-size: 26rpx;
		font-weight: normal;
	}

	.menu-box .grid-text {
		font-size: 26rpx;
		margin-top: 10rpx;
		color: #424242;
	}

	.menu-box .grid-tip {
		font-size: 18rpx;
		color: $font-color-disabled;
	}

	.menu-box .grid-num {
		background-color: #fc4a5b;
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		color: #FFFFFF;
		position: absolute;
		right: 20%;
		top: 20rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 23rpx;
	}

	.user-level {
		line-height: 90rpx;
		padding-left: 80rpx;
		padding-right: 10rpx;
		background-image: url(/pagesB/static/channel/images/title_icon/icon_08.png);
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 40rpx;
		background-position-x: 20rpx;
	}

	.user-level .title-right {
		float: right;
		font-size: 26rpx;
	}

	.swiper-box {
		height: 100%;
		overflow-y: auto;
		;
	}

	.proxy-box {
		width: 710rpx;
		height: 376rpx;

		background-size: 100%;
		margin: 20rpx auto 0;
		padding: 20rpx;
	}

	.proxy-box {


		.proxy-name {
			color: #744700;
			font-size: 48rpx;
		}

		.proxy-desc {
			color: #744700;
			font-size: 22rpx;
			letter-spacing: 40rpx;
		}

		.upgrade-box {
			padding-right: 0 !important;
			padding-left: 80rpx;

			.upgrade {
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				// background: #744800;
				// color: #E9D0A5;
				border-radius: 100rpx 0 0 100rpx;
				border: 0;
			}
		}

	}

	.stats {
		color: #714500;

		.stats-num {
			font-size: 42rpx;
			font-weight: 700;
		}

		.statu-text {
			font-size: 28rpx;
		}
	}

	.menu-box {

		.person {

			.u-flex {
				width: 100%;
				padding-left: 40rpx;
				justify-content: flex-start;
			}
		}

		.stats-box {
			text-align: center;

			.mon {
				font-size: 36rpx;
				font-weight: 500;
				color: #424242;
			}

			.time {
				font-size: 28rpx;
				font-weight: 400;
				color: #424242;
				text-align: center;
			}

			.num {
				font-size: 32rpx;
				font-weight: 500;
				color: #C39F4F;
				margin-top: 10rpx;
				text-align: center;
			}
		}

	}
</style>
